<template>
  <div id="container">
    <el-row>
      <el-row style="margin-top: 0px;padding-top: 0px">
        <el-col>
          <el-descriptions title="" :column="4"  border>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                股票名称
              </template>
              {{ currentStockName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                股票代码
              </template>
              {{ currentStockCode }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-location-outline"></i>
                所属板块
              </template>
              {{currentStockSector}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-tickets"></i>
                流通盘
              </template>
              <el-tag size="small">{{ currentStockRealgu }}</el-tag>
            </el-descriptions-item>

          </el-descriptions>
        </el-col>
      </el-row>
      <el-col :span="20" :offset="2" style="text-align: center;margin-top: 10px">
        <el-radio-group v-model="currentLineType" size="mini" @change="changeKlineGraphic">
          <el-radio-button label="日K"></el-radio-button>
          <el-radio-button label="周K"></el-radio-button>
          <el-radio-button label="月K"></el-radio-button>
          <el-radio-button label="年K"></el-radio-button>
        </el-radio-group>
      </el-col>
      <br>
      <br>
      <br>
      <br>
      <div id="lineGraphic">

      </div>
    </el-row>
    <!--
    <div id="curve" style="width: 100%; height: 600px">

    </div>
    -->

  </div>
</template>

<script>
export default {
  name: "details",
  data() {
    return {
      currentLineType: '日K',
      currentStockCode: this.$route.query.code, //股票代码
      currentStockSector: '', //当前股票所属板块
      currentStockName: '',//股票名称
      currentStockRealgu: '', //当前股票的流通盘
      data0: [],
      lineType: 'day'
    }
  },
  mounted() {

    console.log("要显示的股票代码是：" + this.currentStockCode);
    console.log("要显示的K线类型是：" + this.lineType);
    this.initLineGraphic();
  },
  methods: {
    initLineGraphic() {
      const myChart = this.$echarts.init(document.getElementById('lineGraphic'));
      //var myChart = echarts.init(chartDom);
      let option;

      const upColor = '#ec0000';
      const upBorderColor = '#8A0000';
      const downColor = '#00da3c';
      const downBorderColor = '#008F28';
      // Each item: open，close，lowest，highest
      //注意：这里咱们发送请求；
      let data = {
        code: this.currentStockCode,
        type: this.lineType
      };

      let rawData;
      this.$store.dispatch('queryUserStockKlineGraphicViewInfo', data).then(resp => {
        if (resp.code === 200) {
          console.log(resp.data.data);
          rawData = resp.data.data;
          this.data0 = this.splitData(rawData);
          this.currentStockName = resp.data.market;
          this.currentStockSector = resp.data.stockName
          this.currentStockRealgu = resp.data.realgu
          //let _that = this;
          option = {
            title: {
              text: resp.data.stockName,
              left: 0
            },
            tooltip: {
              trigger: 'axis',
              //更改K线图的提示信息
              formatter: function (param) {
                param = param[0];
                //console.log("-------param-------")
                //console.log(param);
                return [
                  '日期: ' + param.name + '<hr size=1 style="margin: 3px 0">',
                  '开盘价: ' + param.data[1] + '<br/>',
                  '收盘价: ' + param.data[2] + '<br/>',
                  '最低价: ' + param.data[3] + '<br/>',
                  '最高价: ' + param.data[4] + '<br/>'
                ].join('');
              },
              axisPointer: {
                type: 'cross'
              }
            },
            legend: {
              data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30']
            },
            grid: {
              left: '10%',
              right: '10%',
              bottom: '15%'
            },
            xAxis: {
              type: 'category',
              data: this.data0.categoryData,
              boundaryGap: false,
              axisLine: {onZero: false},
              splitLine: {show: false},
              min: 'dataMin',
              max: 'dataMax'
            },
            yAxis: {
              scale: true,
              splitArea: {
                show: true
              }
            },
            dataZoom: [
              {
                type: 'inside',
                //把下面两行必须注释掉；
                //start: 50,
                //end: 100
              },
              {
                show: true,
                type: 'slider',
                top: '90%',
                showDetail: true,
                startValue: 0,
                endValue: 100,
                start: null,
                end: null
              }
            ],
            series: [
              {
                name: '日K',
                type: 'candlestick',
                data: this.data0.values,
                itemStyle: {
                  color: upColor,
                  color0: downColor,
                  borderColor: upBorderColor,
                  borderColor0: downBorderColor
                },
                markPoint: {
                  label: {
                    formatter: function (param) {
                      return param != null ? Math.round(param.value) + '' : '';
                    }
                  },
                  data: [
                    {
                      name: 'Mark',
                      coord: ['2013/5/31', 2300],
                      value: 2300,
                      itemStyle: {
                        color: 'rgb(41,60,85)'
                      }
                    },
                    {
                      name: 'highest value',
                      type: 'max',
                      valueDim: 'highest'
                    },
                    {
                      name: 'lowest value',
                      type: 'min',
                      valueDim: 'lowest'
                    },
                    {
                      name: 'average value on close',
                      type: 'average',
                      valueDim: 'close'
                    }
                  ],
                  tooltip: {
                    formatter: function (param) {
                      return param.name + '<br>' + (param.data.coord || '');
                    }
                  }
                },
                markLine: {
                  symbol: ['none', 'none'],
                  data: [
                    [
                      {
                        name: 'from lowest to highest',
                        type: 'min',
                        valueDim: 'lowest',
                        symbol: 'circle',
                        symbolSize: 10,
                        label: {
                          show: false
                        },
                        emphasis: {
                          label: {
                            show: false
                          }
                        }
                      },
                      {
                        type: 'max',
                        valueDim: 'highest',
                        symbol: 'circle',
                        symbolSize: 10,
                        label: {
                          show: false
                        },
                        emphasis: {
                          label: {
                            show: false
                          }
                        }
                      }
                    ],
                    {
                      name: 'min line on close',
                      type: 'min',
                      valueDim: 'close'
                    },
                    {
                      name: 'max line on close',
                      type: 'max',
                      valueDim: 'close'
                    }
                  ]
                }
              },
              {
                name: 'MA5',
                type: 'line',
                data: this.calculateMA(5),
                smooth: true,
                lineStyle: {
                  opacity: 0.5
                }
              },
              {
                name: 'MA10',
                type: 'line',
                data: this.calculateMA(10),
                smooth: true,
                lineStyle: {
                  opacity: 0.5
                }
              },
              {
                name: 'MA20',
                type: 'line',
                data: this.calculateMA(20),
                smooth: true,
                lineStyle: {
                  opacity: 0.5
                }
              },
              {
                name: 'MA30',
                type: 'line',
                data: this.calculateMA(30),
                smooth: true,
                lineStyle: {
                  opacity: 0.5
                }
              }
            ]
          };

          option && myChart.setOption(option);

        }
      })


    },
    splitData(rawData) {
      const categoryData = [];
      const values = [];
      console.log("-------splitData------");
      console.log(rawData);
      console.log(rawData.length);

      for (let i = 0; i < rawData.length; i++) {
        categoryData.push(rawData[i].splice(0, 1)[0]);
        values.push(rawData[i]);
      }
      return {
        categoryData: categoryData,
        values: values
      };
    },
    calculateMA(dayCount) {
      let result = [];
      for (let i = 0, len = this.data0.values.length; i < len; i++) {
        if (i < dayCount) {
          result.push('-');
          continue;
        }
        let sum = 0;
        for (let j = 0; j < dayCount; j++) {
          sum += +this.data0.values[i - j][1];
        }
        result.push(sum / dayCount);
      }
      return result;
    },

    changeKlineGraphic(){
      console.log('触发了日线图形切换事件...');
      console.log(this.currentLineType);
      if('日K' === this.currentLineType){
        this.lineType = 'day';
      }else if('周K' === this.currentLineType){
        this.lineType = 'week';
      }else if('月K' === this.currentLineType){
        this.lineType = 'month';
      }else if('年K' === this.currentLineType){
        this.lineType = 'year';
      }

      //重新画图;
      this.initLineGraphic();
    }
  }

}
</script>

<style scoped>
#container {
  margin: 20px 40px;
  padding-right: 20px;
}

.demo-form-inline {
  text-align: center;
}

#lineGraphic {
  width: 1200px;
  height: 520px;
}

</style>
